<template>
  <ele-table-select
    multiple
    clearable
    :disabled="disabled"
    placeholder="请选择"
    value-key="id"
    label-key="name"
    v-model="selectedValue"
    :table-props="tableProps"
    :popper-width="580"
    :max-tag-count="5"
    :popper-options="{ strategy: 'fixed' }"
  />
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { searchPageProducts } from "@/api/base/search";

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:modelValue"]);

/** 表格下拉选中值 */
const selectedValue = ref(props.modelValue);

// 监听props.modelValue变化并更新selectedValue
watch(
  () => props.modelValue,
  (newVal) => {
    selectedValue.value = newVal;
  },
  { immediate: true },
);

// 监听selectedValue变化并触发update事件
watch(
  selectedValue,
  (newVal) => {
    emit("update:modelValue", newVal);
  },
  { deep: true },
);

/** 表格配置 */
const tableProps = reactive({
  datasource: [],
  columns: [
    {
      type: "selection",
      columnKey: "selection",
      width: 50,
      align: "center",
      fixed: "left",
      reserveSelection: true,
    },
    {
      type: "index",
      columnKey: "index",
      width: 50,
      align: "center",
      fixed: "left",
    },
    {
      prop: "name",
      label: "产品名称",
    },
    {
      prop: "original_price",
      label: "原价",
      sortable: "custom",
      slot: "original_price",
    },
    {
      prop: "current_price",
      label: "现价",
      sortable: "custom",
      width: 80,
    },
  ],
  showOverflowTooltip: true,
  toolbar: false,
  pagination: {
    pageSize: 6,
    layout: "total, prev, pager, next, jumper",
    style: { padding: "0px" },
  },
  rowClickChecked: true,
});

/** 查询表格数据 */
searchPageProducts({
  status: 1,
}).then((data) => {
  tableProps.datasource = data.data;
});
</script>
